<%--
  Created by IntelliJ IDEA.
  User: HKemmm
  Date: 2021/4/9
  Time: 15:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>ajax练习</title>

    <!-- 全局js -->
    <script src="static/views/Hplus-v.4.1.0/js/jquery.min.js"></script>
    <script src="static/views/Hplus-v.4.1.0/js/bootstrap.min.js?v=3.3.6"></script>

    <script type="text/javascript">
        function doAjax(){
            //1.获取ajax引擎对象
            var xmlhttp;
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }

            //2.确定ajax引擎发送方式，服务器处理路径，异步（true）/同步（false）
            xmlhttp.open("get","AjaxServlet?userName=zhangsan&userAge=15",true);

            //3.发送数据
            xmlhttp.send();

            //4.判断Ajax状态码和服务器状态码
            //4：Ajax请求已完成，且响应已就绪   ||   200：服务器 "OK"
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    //业务逻辑处理
                    document.getElementById("lablMsg").innerHTML=xmlhttp.responseText;

                    var str = "";

                    <c:forEach items="${sessionScope.list1}" var="each">
                        str += "<h1>${each}</h1><br>";
                    </c:forEach>


                    $("#context").html(str);
                }
            }
            //一次响应完成

        }

        function doJqueryAjax(){
            $.ajax({
                type: "POST", // 请求方式
                url: "ajaxdemo", // 请求的服务器路径
                data: "userName=张三&userAddress=天津", // post请求的数据参数
                datatype:"json", // 服务器响应的内容类型
                success: function(data){ // ajax请求成功时的回调函数
                    // 这里是进行ajax业务逻辑处理的地方
                    // 执行ajax引擎的回调处理，这里是用来进行业务逻辑处理的【类似 thread 类的 run 方法； 类似于 servlet的service方法】
                    //document.getElementById("lblMsg2").innerHTML = data;

                    //业务逻辑处理
                    //document.getElementById("lablMsg").innerHTML=data;
                    $("#lablMsg").html(data);
                    console.log(data);

                    <%--console.log(${lstBean.get(1).toString()});--%>
<%--                    <c:forEach items="${sessionScope.lstBean}" var="each">--%>
<%--                        console.log(${each.username});--%>
<%--                    </c:forEach>--%>

                },
                error: function (){
                    // ajax请求发生非错误时的回调函数
                }
            });
        }

        function doJqueryAjax2(){
            $.ajax({
                type:"POST",
                url:"ajaxdemo2",
                data:"userName=李四&userAddress=天津",
                datatype: "josn",
                success:function (data){
                    console.log(data);
                },
                error: function (){
                    // ajax请求发生非错误时的回调函数
                }
            });
        }

        function doJqueryAjax3(){
            $.ajax({
                type:"POST",
                url:"ajaxdemo3",
                data:"userName=李四&userAddress=天津",
                datatype: "josn",
                success:function (data){
                    console.log(data);

                    $("#lablMsg").html(JSON.stringify(data));

                },
                error: function (){
                    // ajax请求发生非错误时的回调函数
                }
            });
        }
    </script>
</head>
<body>
<input type="button" onclick="doJqueryAjax3()" value="Ajax测试">
<label id="lablMsg"></label><br>

<div id="context">

</div>
</body>
</html>
